<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_967424_pw3n0smm0p.css" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content {
				background: url(images/login-header.png)no-repeat;
				background-size: 100%;
				padding-top: 170px;
			}
			
			.mui-icon {
				color: #007aff;
			}
			
			h1 {
				font-size: 30px;
				color: #007aff;
				text-align: center;
				font-weight: 200;
				padding-bottom: 30px;
			}
			
			h1 .line {
				position: relative;
				top: 4px;
				display: inline-block;
				height: 30px;
				width: 2px;
				background: #007aff;
				margin: 0 10px;
			}
			
			.item {
				padding: 0 10%;
				display: flex;
				justify-content: center;
			}
			
			.item-img {
				flex: 1;
				padding: 12px 0;
			}
			
			.item input {
				flex: 9;
				border: none;
				background: inherit;
				border-radius: 0px;
				border-bottom: 1px solid #007aff;
			}
			
			.item .mui-icon {
				line-height: 32px;
				font-size: 40px;
				padding-right: 10px;
			}
			
			.btn {
				padding: 30px 10% 0;
			}
			
			.mui-btn {
				border-radius: 40px;
				padding: 10px;
			}
			
			.register {
				background: inherit;
				color: #007aff;
			}
			
			#footer {
				background: url(images/login-footer.png)right 15px no-repeat;
				background-size: 60%;
				height: 200px;
				text-align: center;
			}
			
			#footer span {
				color: #007aff;
				line-height: 20px;
			}
			
			#footer .line {
				display: inline-block;
				height: 14px;
				width: 1px;
				background: #007aff;
				margin: 0 10px;
			}
			
			.iconfont {
				color: #007AFF;
				font-size: 20px;
			}
			
			.icon-shouji {
				position: relative;
				left: -4px;
				font-size: 27px;
				padding-right: 2px;
			}
			
			.icon-yanzhengma {
				padding-right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="app">
			<div class="content">
				<h1><span>普通用户</span><em class="line"></em><span>LOGIN</span></h1>

				<!--<div class="item">
					<div class="item-img">
						<i class="iconfont icon-shouji"></i>
					</div>
					<input type="text" id="account " value="" placeholder="手机号" />
				</div>-->
				<!--<div class="item">
					<div class="item-img">
						<i class="iconfont icon-yanzhengma"></i>
					</div>
					<input type="password" name="" id="passwrod" placeholder="验证码" />
				</div>-->
				<div class="item">
					<div class="item-img">
						<i class="mui-icon mui-icon-contact"></i>
					</div>
					<input type="number" v-model="shoujihao" id="account" />
				</div>
				<div class="item">
					<div class="item-img">
						<i class="mui-icon mui-icon-locked"></i>
					</div>
					<input type="password" v-model="mima" name="" id="passwrod" />
				</div>

				<div class="btn">

				</div>
				<div class="btn">
					<!--<button v-if="msg==='1'" type="button" class="btn_open mui-btn mui-btn-grey mui-btn-block">登录</button>-->
					<button type="button" id="login" class="btn_open mui-btn mui-btn-blue mui-btn-block">登录</button>
					<button type="button" class="btn_open register mui-btn mui-btn-blue mui-btn-block">企业登录</button>
					<button type="button" class="btn_open register mui-btn mui-btn-blue mui-btn-block">注册</button>
				</div>
				<div id="footer">
					<!--<span class="btn_open">用户注册</span>-->
					<!--<em class="line"></em><span class="btn_open">忘记密码 <i class="mui-icon mui-icon-help"></i></span>-->
					</span>
				</div>
			</div>
		</div>

	</body>

</html>

<script src="js/mui.min.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript">
	mui.init({
		beforeback: function() {　　　　 //获得父页面的webview
			var list = plus.webview.currentWebview().opener();　　　　 //触发父页面的自定义事件(refresh),从而进行刷新
			mui.fire(list, 'shuaxin');
			//返回true,继续页面关闭逻辑
			return true;
		}
	});
	var app = new Vue({
		el: '#app',
		data: {
			mima: '',
			shoujihao: '',
		},
		methods: {}
	})

	mui(".btn").on('tap', '.btn_open', function() {
		if(this.id === 'login') {
			denglu();
		} else if(this.innerText === '企业登录') {
			gbtiao('qiyedenglu');
		} else if(this.innerText === '注册') {
			tiao('yonghuzhuce');
		}
	});

	function denglu() {
		if(mui("#account")[0].value && mui("#passwrod")[0].value) {
			mui.ajax({
				url: URL + 'meGeneralUser!loginGenUser',
				data: {
					comPhone: app.shoujihao,
					comPassword: app.mima,
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(data) {
					if(data.success === true) {
						cun("TOKEN", JSON.stringify(data.clazz));
						mui.back();
					}
					mui.toast(data.msg);
				},
				error: function(xhr, type, errorThrown) {
					console.log(xhr)
				}
			});
		}else{
			mui.toast("账号或密码不能为空")
		}
	}

	//检查手机号是否注册
	//	function check(num) {
	//		mui.ajax(URL + 'meGeneralUser!isHas', {
	//			data: {
	//				id: num,
	//			},
	//			dataType: 'json', //服务器返回json格式数据
	//			type: 'post', //HTTP请求类型
	//			timeout: 10000, //超时时间设置为10秒；
	//			success: function(data) {
	//				console.log(data.msg)
	//				app.msg = data.msg;
	//			},
	//			error: function(xhr, type, errorThrown) {
	//				console.log(xhr)
	//			}
	//		});
	//
	//	}
</script>